<template>
	<view class="content">
		<image :src="baseurl+'association/bg2.png'" class="bg"></image>
		<view class="typeBox">
			<view class="typeBoxTop">
				<image :src="baseurl+'association/1.png'" class="typeLabel"></image>
				<text class="allType"
					@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('/packageB/all_association/all_association')">全部></text>
			</view>
			<view class="typeBoxBottom">
				<view class="typeItem" v-for="(item,index) in association" :key="index"
					@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('/packageB/association_info/association_info',{id:item.id})">
					<image :src="item.head" class="typeItemIcon"></image>
					<text class="typeItemName">{{item.name}}</text>
				</view>
			</view>
			<view class="establish"
				@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('/packageB/association_establish/association_establish')">
				+成立社群
			</view>
		</view>
		<view class="selectBox">
			<view class="selectTop">
				<image :src="baseurl+'association/2.png'" class="selectLabel"></image>
				<view class="selectTypeBox">
					<text class="selectType" :class="menuIndex==2?'selectTypeActive':''"
						@click="changeMenu(2)">活动</text>
					<text class="selectType" :class="menuIndex==1?'selectTypeActive':''"
						@click="changeMenu(1)">帖子</text>
					<text class="selectType" :class="menuIndex==0?'selectTypeActive':''"
						@click="changeMenu(0)">更多</text>
				</view>
			</view>
			<view class="listBox">
				<!-- 修复核心：只有索引≥1时才可能应用darkText -->
				<block v-for="(item,index) in total" :key="index">
					<!-- 活动 -->
					<view class="listBoxInner"
						:class="[index%2==0?'activityBg':'activityBg1', index > 0 && index%2!=0 ? 'darkText' : '']"
						v-if="item.sponsor" @click="toInfo(item.status,item.uri,item.id)">
						<view class="listItem">
							<view class="activityBox">
								<view class="topBox">
									<image :src="baseurl+'association/icon1.png'" class="itemIcon"></image>
									<image :src="baseurl+'association/din.png'" v-if="item.is_top==1" class="din">
									</image>
									<text class="activityTitle">{{item.name}}</text>
								</view>
								<image :src="item.cover" class="itemCover"></image>
								<text class="activityName" style="left: 0;">主办方：{{item.sponsor}}</text>
								<text
									class="activityTime">活动时间：{{$timestampToTime(item.start_time)}}至{{$timestampToTime(item.end_time)}}</text>
								<text class="activityaddress">活动地点：{{item.address}}</text>
								<!-- <text class="activityNum" v-if="item.status==0">活动状态：未开始</text>
								<text class="activityNum" v-else-if="item.status==1">活动状态：进行中</text>
								<text class="activityNum" v-else-if="item.status==2">活动状态：已结束</text> -->
								<text class="activityNum">报名资格：{{ ['所有人', '主理人', '社群成员'][item.condition] }}</text>
							</view>
						</view>
					</view>
					<!-- 帖子 -->
					<view class="listBoxInner"
						:class="[index%2==0?'activityBg':'activityBg1', index > 0 && index%2!=0 ? 'darkText' : '']"
						v-else
						@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('/packageB/post_info/post_info',{id:item.id})">
						<view class="listItem">
							<view class="activityBox">
								<view class="topBox">
									<image :src="baseurl+'association/icon2.png'" class="itemIcon"></image>
									<image :src="baseurl+'association/din.png'" v-if="item.is_top==1" class="din">
									</image>
									<text class="activityTitle">{{item.title}}</text>
								</view>
								<image :src="item.avatar" class="activityHead"></image>
								<view class="activityNameBox">
									<text class="activityName1">{{item.nickname}}</text>
									<image :src="ite.icon_url" v-for="(ite,ind) in item.medal" :key="ind"
										class="userBadge"></image>
								</view>
								<view class="viewBox">
									<image :src="baseurl+'association/icon9.png'" class="eye"></image>
									<text class="viewNum">阅读：{{item.read_num}}</text>
									<image :src="baseurl+'association/vote.png'" class="vote"></image>
									<text class="viewNum">点赞：{{item.like}}</text>
									<image :src="baseurl+'association/msg.png'" class="msg"></image>
									<text class="viewNum">回复：{{item.comment}}</text>
								</view>
								<text class="publishTime">发布时间：{{item.create_time}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 社群空间 -->
		<view class="placeBox">
			<view class="typeBoxTop">
				<image :src="baseurl+'association/1-1.png'" class="typeLabel"></image>
			</view>
			<view class="swiperBox"
				@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('/packageB/space/space')">
				<swiper class="swiper-item" circular='true' :interval="3000" :duration="1000"
					@change="handleSwiperChange" :current="currentSwiper">
					<swiper-item class="swiper-item" v-for="(item,index) in spaceList" :key="index">
						<image :src="item" class="itemImg"></image>
						<!-- <text class="swiperTitle">{{item.name}}</text> -->
					</swiper-item>
				</swiper>
				<!-- 自定义指示点容器 -->
				<view class="custom-indicator">
					<view class="indicator-dot" v-for="(dot, index) in spaceList.length" :key="index"
						:class="{ 'active': index === currentSwiper }"></view>
				</view>
			</view>
		</view>
		<view class="tabBarBox">
			<image src="@/static/tab/bg.png" class="tabbg"></image>
			<image src="@/static/tab/1.png" class="projectTab" @click="$redirectTo('/packageB/project/project')">
			</image>
			<image src="@/static/tab/2s.png" class="associationTab"
				@click="$redirectTo('/packageB/association/association')"></image>
			<image src="@/static/tab/3.png" class="homeTab" @click="$redirectTo('/pages/index/index')"></image>
			<image src="@/static/tab/4.png" class="mallTab" @click="$redirectTo('/packageB/category/category')"></image>
			<image src="@/static/tab/5.png" class="myTab" @click="$redirectTo('/pages/user/user')"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				bannerList: [],
				login: '',
				association: [],
				article: [],
				activity: [],
				total: [],
				menuIndex: 0,
				page: 1,
				versions: 2,
				currentSwiper: 0, // 当前轮播索引（默认第1张）
				spaceList: ''
			}
		},
		onLoad(option) {
			const accountInfo = uni.getAccountInfoSync();
			console.log(accountInfo.miniProgram.envVersion)
			if (accountInfo.miniProgram.envVersion === 'trial' || accountInfo.miniProgram.envVersion === 'develop') {
				this.versions = 1;
				console.log('这是测试版');
			} else {
				console.log('这是正式版');
				this.versions = 2;
			}
			//获取空间列表
			this.$request.get(`CommunitySpace/community_space_list`).then(res => {
				let data = res.data.data
				this.spaceList = data.map(item => item.cover).filter(cover => cover);
			})
			//获取轮播
			this.$request.get(`CommunityBanner/community_banner_list?type=1`).then(res => {
				this.bannerList = res.data.data;
			})
			// 获取社群列表
			this.$request.get(`community/communityLists`).then(res => {
				this.association = res.data.data;
			})
			// 获取文章列表
			this.$request.get(`community/articleLists?page_no=${this.page}`).then(res => {
				this.article = res.data.data.list;
				// 获取活动列表
				this.$request.get(`CommunityActivity/activityList?page=${this.page}&versions=${this.versions}`)
					.then(res => {
						this.activity = res.data.data;
						if (this.article.length > 0 && this.activity.length > 0) {
							this.total = this.mergeArrays(this.activity, this.article);
						}
						if (this.article.length == 0 && this.activity.length > 0) {
							this.total = this.activity;
						}
						if (this.article.length > 0 && this.activity.length == 0) {
							this.total = this.article;
						}
					})
			})
		},
		onShow() {
			uni.hideHomeButton()
			this.login = this.isLogin;
			console.log(this.login);
		},
		onReachBottom() {
			console.log("加载更多");
			this.page++;
			this.$request.get(`community/articleLists?page_no=${this.page}`).then(res => {
				this.article.push(...res.data.data.list);
				// 获取活动列表
				this.$request.get(`CommunityActivity/activityList?page=${this.page}&versions=${this.versions}`)
					.then(res => {
						this.activity.push(...res.data.data);
						if (this.menuIndex == 0) {
							this.total = this.mergeArrays(this.activity, this.article);
						}
						if (this.menuIndex == 1) {
							this.total = this.article;
						}
						if (this.menuIndex == 2) {
							this.total = this.activity;
						}
					})
			})
		},
		methods: {
			handleSwiperChange(e) {
				// 由于开启了circular（循环），需要处理索引计算
				const realIndex = e.detail.current;
				this.currentSwiper = realIndex % this.spaceList.length;
			},
			toInfo(status, url, id) {
				if (this.login === false) { //去登录
					this.$navto.navto('/packageB/login/login');
				} else if (status == 2) { //已结束
					if (url) { //存在链接跳公众号
						this.$navto.navto('/pages/webview/webview', {
							url: url,
							from: 1
						})
					} else {
						this.$navto.navto('/packageB/activity_info/activity_info', {
							id: id
						})
					}
				} else {
					this.$navto.navto('/packageB/activity_info/activity_info', {
						id: id
					})
				}
			},
			changeMenu(num) {
				this.page = 1;
				this.menuIndex = num;
				if (num == 0) {
					this.total = this.mergeArrays(this.activity, this.article);
				} else if (num == 1) {
					this.total = this.article;
				} else if (num == 2) {
					this.total = this.activity;
				}
			},
			mergeArrays(array1, array2) {
				let mergedArray = [];
				let maxLength = Math.max(array1.length, array2.length);
				for (let i = 0; i < maxLength; i++) {
					if (i < array1.length) {
						mergedArray.push(array1[i]);
					}
					if (i < array2.length) {
						mergedArray.push(array2[i]);
					}
				}
				return mergedArray;
			}
		}
	}
</script>

<style lang="scss">
	.darkText {
		text {
			color: #000 !important;
		}

		.black {
			color: #000 !important;
		}
	}

	.placeBox {
		margin-top: 75rpx;
	}

	.selectTypeActive {
		font-size: 22rpx !important;
		color: #000 !important;
	}

	.publish {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 400rpx;
		right: 50rpx;
		z-index: 1;
	}

	.activityBg {
		background-color: #5997AE;
	}

	.activityBg1 {
		background-color: #F0FCFF;
	}

	.postBg {
		background-color: #F1FCFF;
	}

	.publishTime {
		position: absolute;
		max-width: 440rpx;
		font-size: 24rpx;
		font-weight: 500;
		left: 0;
		top: 200rpx;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.viewBox {
		position: absolute;
		height: 20rpx;
		display: flex;
		align-items: center;
		top: 145rpx;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
			color: #fff;
		}
	}

	.selectBox {
		position: relative;
		width: 100%;
		margin-top: 70rpx;

		.black {
			color: #000 !important;
		}

		.listBox {
			width: 100%;

			.listBoxInner {
				width: 100%;
				padding-top: 50rpx;
				padding-bottom: 50rpx;
			}

			.listItem {
				width: 676rpx;
				height: 220rpx;
				position: relative;
				margin-left: 38rpx;

				.activityNameBox {
					position: absolute;
					max-width: 340rpx;
					font-size: 24rpx;
					font-weight: 500;
					top: 70rpx;
					left: 55rpx;
					color: #fff;
					display: flex;

					.activityName1 {
						max-width: 300rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.userBadge {
					width: 32rpx;
					height: 26rpx;
					margin-left: 20rpx;
					margin-top: 5rpx;
				}

				.activityBox {
					position: relative;
					width: 676rpx;

					.activityNum {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 200rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityaddress {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 163rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityTime {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 123rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityName {
						position: absolute;
						max-width: 380rpx;
						font-size: 24rpx;
						font-weight: 500;
						top: 72rpx;
						left: 55rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.itemCover {
						position: absolute;
						width: 236rpx;
						height: 165rpx;
						top: 66rpx;
						right: 0;
						border-radius: 15rpx;
					}

					.activityHead {
						position: absolute;
						width: 37rpx;
						height: 37rpx;
						top: 69rpx;
						border-radius: 50%;
					}

					.activityTitle {
						max-width: 510rpx;
						font-size: 28rpx;
						font-weight: 700;
						margin-left: 20rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.topBox {
					display: flex;
					align-items: center;
				}

				.din {
					width: 28rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}

				.itemIcon {
					width: 60rpx;
					height: 30rpx;
				}
			}
		}

		.selectTop {
			width: 710rpx;
			height: 24rpx;
			margin-bottom: 80rpx;
			display: flex;
			justify-content: space-between;

			.selectTypeBox {
				width: 204rpx;
				height: 24rpx;
				display: flex;
				justify-content: space-between;

				.selectType {
					font-size: 20rpx;
					font-weight: 400;
					color: #8C8C8C;
				}
			}

			.selectLabel {
				width: 135rpx;
				height: 22rpx;
			}
		}
	}

	.typeBox {
		position: relative;
		width: 710rpx;
		margin-top: 200rpx;

		.establish {
			width: 290rpx;
			height: 60rpx;
			margin-top: 50rpx;
			margin-left: 230rpx;
			border: 1rpx solid #5997AE;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-weight: 700;
			color: #5997AE;
			letter-spacing: 2rpx;
		}

		.typeBoxBottom {
			width: 627rpx;
			// height: 130rpx;
			margin-left: 61rpx;
			margin-top: 60rpx;
			display: flex;
			overflow-x: scroll;

			.typeItem {
				width: 90rpx;
				// height: 130rpx;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				align-items: center;
				margin-right: 40rpx;

				.typeItemIcon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.typeItemName {
					font-size: 20rpx;
					font-weight: 500rpx;
					color: #292929;
					text-align: center;
					margin-top: 30rpx;
				}
			}
		}
	}

	.typeBoxTop {
		display: flex;
		width: 710rpx;
		height: 24rpx;
		justify-content: space-between;

		.allType {
			font-size: 20rpx;
			font-weight: 400;
			color: #8C8C8C;
		}

		.typeLabel {
			width: 135rpx;
			height: 22rpx;
		}
	}

	.swiperBox {
		position: relative;
		width: 674rpx;
		height: 385rpx;
		margin-top: 60rpx;
		margin-left: 38rpx;

		.custom-indicator {
			position: absolute;
			bottom: 25rpx;
			right: 35rpx;
			display: flex;
			gap: 10rpx;
			padding: 5rpx 10rpx;
			border-radius: 20rpx;
		}

		.indicator-dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
			background-color: transparent;
		}

		.indicator-dot.active {
			background-color: #FFFFFF;
			width: 30rpx;
			border-radius: 6rpx;
		}

		.swiper-item,
		.itemImg {
			width: 100%;
			height: 385rpx;
		}

		.swiperTitle {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			margin-top: 20rpx;
			color: #fff;
			position: relative;
			z-index: 1;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 329rpx;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 0 !important;
	}

	.content {
		width: 100%;
		background: url('https://miantou.guguan.net/img/common/bg.png');
		background-size: 100% auto;
		background-color: #fff;
		padding-bottom: 240rpx;
	}
</style>